<article class="comp-invite-info">
    <loading v-if="isLoading === true" style="margin-bottom: 64px;"></loading>
    <template v-else>
        <div class="info-header">
            <div class="header-left">
                <div class="qrcode">
                    <qrcode :val="inviteLink" :size="112"></qrcode>
                </div>
            </div>
            <div class="header-right">
                <div class="header-right-top">
                    <div class="header-right-top-item"><span class="fn-bold">我的邀請ID：</span>{{info.inviteCode}}</div>
                    <div class="header-right-top-item"><span class="fn-bold">我的推薦鏈接：</span>
                        <input type="text"
                               class="input"
                               readonly
                               v-model="inviteLink"
                               id="inviteLink">
                        <img src="../../img/invite_copy.png" alt="" width="24" class="img" @click="copy('#inviteLink')">
                    </div>
                </div>
                <div class="header-right-bottom">
                    <ul class="list">
                        <li class="list-item">
                            <img src="../../img/invite_jl.png" alt="" class="img">
                            <div class="item-info">
                                <p class="text">已獲獎勵數量</p>
                                <p class="text text-info">
                                    <span class="text-em" v-for="item in info.inviteUserRewardRecords"
                                          v-if="info.inviteUserRewardRecords.length > 0">
                                        <em>{{filter.floorFix(item.rewardAmount, 3)}}{{item.rewardAssetCode}}</em>&nbsp;
                                    </span>
                                    <span class="text-em" v-if="info.inviteUserRewardRecords.length === 0">暫無</span>
                                </p>
                            </div>
                        </li>
                        <li class="list-item">
                            <img src="../../img/invite_jp.png" alt="" class="img">
                            <div class="item-info">
                                <p class="text">50元數字資產禮包
                                    <span class="info-bg info-bg--green" v-if="info.receiveReward === true">已領取</span>
                                    <span class="info-bg info-bg--gray" v-if="info.receiveReward === false">未領取</span>
                                </p>
                                <p class="text text-info">
                                    <span class="text-em" v-for="item in info.inviteActivityRewardConfigs"
                                          v-if="info.inviteActivityRewardConfigs.length > 0">
                                        <em>{{filter.floorFix(item.amount, 3)}}{{item.rewardAssetCode}}</em>&nbsp;
                                    </span>
                                    <span class="text-em" v-if="info.inviteActivityRewardConfigs.length === 0">暫無</span>
                                </p>
                            </div>
                        </li>
                        <li class="list-item">
                            <img src="../../img/invite_yy.png" alt="" class="img">
                            <div class="item-info">
                                <p class="text">成功邀請的好友</p>
                                <p class="text">{{info.inviteCount}}人</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="info-content">
            <div class="content content-left">
                <div class="title">已完成的推薦</div>
                <div class="m-table">
                    <table>
                        <thead>
                        <tr>
                            <th width="50%">註冊郵箱</th>
                            <th width="50%" class="fn-ta-right">時間</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="m-table table-body">
                    <table>
                        <tbody>
                        <tr v-for="item in recommendList" v-if="recommendList.length > 0">
                            <td>{{item.inviteEmail}}</td>
                            <td class="fn-ta-right">{{item.updateDate | timezone('YYYY-MM-DD')}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <no-data v-if="recommendList && recommendList.length === 0"></no-data>
                </div>
            </div>
            <div class="content content-right">
                <div class="title">已獲得的獎勵</div>
                <div class="m-table">
                    <table>
                        <thead>
                        <tr>
                            <th width="50%">獎勵數量</th>
                            <th width="50%" class="fn-ta-right">時間</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="m-table table-body">
                    <table>
                        <tbody>
                        <tr v-for="item in rewardList" v-if="rewardList.length > 0">
                            <td>{{item.rewardAmount}}{{item.rewardAssetCode}}</td>
                            <td class="fn-ta-right">{{item.createDate | timezone('YYYY-MM-DD')}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <no-data v-if="rewardList && rewardList.length === 0"></no-data>
                </div>
            </div>
        </div>
    </template>
</article>